<template>
  <div class="hello" v-loading.fullscreen.lock="loading">
    <el-form
      :model="obj"
      :rules="rules"
      ref="obj"
      label-width="60px"
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="name">
        <el-input v-model="obj.name" placeholder="ppt名称"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="obj.description" placeholder="ppt描述"></el-input>
      </el-form-item>
      <el-form-item prop="resources">
        <el-upload
          :multiple="false"
          :limit="1"
          :on-change="upchange"
          class="upload-demo"
          ref="upload"
          :action="uploadUrl"
          :headers="{ jwt }"
          accept=".pptx,.ppt,.pdf"
          :auto-upload="false"
          name="resources"
          :on-success="handleAvatarSuccess"
          :data="obj"
          :before-upload="flieds"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选取文件</el-button
          >
          <el-button
            style="margin-left: 10px"
            size="small"
            type="success"
            @click="submitUpload('obj')"
            >上传到服务器</el-button
          >
        </el-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
  name: "HelloWorld",
  data() {
    return {
      loading: false,
      jwt: getToken(),
      uploadUrl: this.$store.getters["url/urls"] + "virtual/v1/userPpt/upload",
      obj: {
        name: "",
        description: "",
        source: 1,
        type: 2,
        resources: "",
      },
      rules: {
        name: [{ required: true, message: "请填写ppt名称", trigger: "change" }],
        description: [
          { required: true, message: "请填写ppt描述", trigger: "change" },
        ],
        resources: [
          { required: true, message: "请选择PPT文件", trigger: "change" },
        ],
      },
    };
  },
  watch: {},
  props: {
    msg: String,
  },
  methods: {
    flieds(file) {
      if (file.size < 100000000) {
        return true;
      } else {
        this.$message({
          message: "上传文件大于100M",
          type: "error",
        });
        return false;
      }
    },
    upchange(file) {
      if (file.status === "ready") {
        this.obj.resources = file.raw;
      }
    },
    submitUpload(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          this.obj.resources = "";
          this.$refs.upload.submit();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleAvatarSuccess(val) {
      if (val.code === 200) {
        this.$message({
          message: val.msg,
          type: "success",
        });
        this.$refs.upload.clearFiles();
        this.loading = false;
        this.$emit("pptupok", Number(val.data.uuid));
      } else {
        this.loading = false;
        this.$message({
          message: val.msg,
          type: "error",
        });
        this.$refs.upload.clearFiles();
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
